<template>
  <h2>修改联系人</h2>
 <el-divider />
 <div class="add-container">
  <el-form
    style="width:80%"
    status-icon
    label-width="auto"
  >
    <el-form-item label="联系人姓名">
      <el-input type="text" v-model="link.name" />
    </el-form-item>
    <el-form-item label="联系人电话">
      <el-input type="text" v-model="link.phone" />
    </el-form-item>
     <el-form-item label="分类">
       <el-select v-model="link.cgy" placeholder="选择分类">
        <el-option  value="家庭" />
        <el-option  value="亲戚" />
        <el-option  value="朋友" />
        <el-option  value="同事" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addLink">
        添加
      </el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script  setup>
   import { ref,reactive} from 'vue'
   import axios from '../axios/index.js'
   import {userStore} from '../store/UserStore.js'
   import {useRouter} from 'vue-router'
   const store=userStore();
   const router=useRouter();
   import { ElMessage, ElMessageBox } from 'element-plus'

   const link=reactive({
     id:0,
     name:"",
     phone:"",
     cgy:""
   })
   
   const editLink=async()=>{
      let d=await axios.post("/edit",link)
      if(d.data.code==2000){
          ElMessageBox.alert('修改成功!','操作提示')
          router.push("/list")
      }else{
          alert(d.data.msg)
      }
   }
  
</script>

<style scoped>
  .add-container{
     display: flex;
     justify-content: center;
     align-items: center;
     width:100%;
  }
  h2{text-align: center;}
</style>
